<template>
  <div
    class="dv-card"
    :style="{ gridTemplateRows: sub ? '45px auto' : '', ...cardBgStyle }"
  >
    <div class="header" :style="headerBgStyle">
      <slot name="header"></slot>
    </div>
    <div class="content" :style="contentBgStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { useBackgroundImage } from "@/composables";
import { toRefs } from "vue";
export default {
  name: "DvCard",
  props: {
    contentBg: String,
    cardBg: String,
    headerBg: String,
    headerHeight: {
      type: String,
      default: "60px",
    },
    sub: { type: Boolean, default: false },
  },
  setup(props) {
    const { contentBg, cardBg, headerHeight, headerBg } = toRefs(props);
    const contentBgStyle = useBackgroundImage(contentBg.value, {});
    const cardBgStyle = useBackgroundImage(cardBg.value, {
      gridTemplateRows: `${headerHeight.value} auto`,
    });
    const headerBgStyle = useBackgroundImage(headerBg.value, {});
    return {
      contentBgStyle,
      cardBgStyle,
      headerBgStyle,
    };
  },
};
</script>

<style scoped lang="scss">
.dv-card {
  display: grid;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  .header {
    padding: 12px 0 0 20px;
    overflow: hidden;
    display: grid;
  }
  .content {
    background-repeat: no-repeat;
  }
}
</style>
